<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 
        MVVM模型
            1.M：模型（Model）：data中的数据
            2.V：视图（View）： 模板代码
            3.VM：视图模板（ViewModel）： Vue实例

            data中所有属性，最后都会出现在vm身上
            vm身上的所有属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用
     -->
    <div id="root">
        <h1>姓名：{{name}}</h1>
        <h1>性别：{{sex}}</h1>
    </div>

    <script type="text/javascript">
        const vm = new Vue({
            data(){
                return {
                    name: 'Aurora',
                    sex:"male"
                }
            }
        })
        console.log("打印vm对象：",vm)
        vm.$mount('#root');
    </script>
    
</body>
</html>